<script setup>
import { ref } from 'vue'
import { Edit,Delete } from '@element-plus/icons-vue';
//  import {artGetListService,artDeleteService} from '@/api/article' //导入获取文章
import {getDanYuan,addDanYuan,delDanYuan} from '@/api/gongs.js'
import { ElMessage } from 'element-plus';
import {useKuYiStore} from '@/stores'

//后端请求过来的接口展示文章列表
const articleList = ref([]) 

// 获取后端的单元接口
const values = ref([])

// 模拟后台请求到的所有的楼宇

const useStores = useKuYiStore()
const formModel=ref([])  //弹出框的数据
const total=ref(0) //总条数
const loading=ref(false) //loading状态
// Dialog弹出框的状态
const dialogVisible=ref(false)

// 管理弹出框是否是添加和编辑的
const isDialog=ref(false)
// dialog表单域校验
const formRef=ref(null)

// 定期请求参数对象
const params=ref({
    action:'list', //list为请求列表，filter为筛选，find为查询；add为增加单元，del为删除单元
    page:1,        //当亲页
    perPage:5,     //当前生效额每页条数
    id:'',         //del时必须
    building:'',   //楼宇名称
    unit_number:'' //单元名称
})

// 表单规则
const rules={
        building:[
            {required:true,message:'请选择楼宇名称',trigger:'blur'},
            { pattern: /^\S{1,10}$/, message: '楼宇必须是1-10位的非空字符', trigger: 'blur' }
        ],
        unit_number: [
            { required: true, message: '请输入单元名称', trigger: 'blur' },
            { pattern: /^[一二三四五六七八九十]{1,3}单元$/, message: '单元名必须是"几单元"格式，前边是单元号，后边是单元', trigger: 'blur' }
        ]
    }

// 确定表单
const onSubmit= async ()=>{
    await formRef.value.validate() //预校验
    console.log(isDialog.value);
    // 根据 isDialog 的值判断是添加还是编辑
    if (!isDialog.value) {
        // 添加逻辑
        // 提交 formModel.value 数据
        params.value.action = 'add';
        params.value.building = formModel.value.building;
        params.value.unit_number = formModel.value.unit_number;
        const res = await addDanYuan(params.value)
        // 重置请求体
        params.value={
            action:'list', //list为请求列表，filter为筛选，find为查询；add为增加单元，del为删除单元
            page:1,        //当亲页
            perPage:5,     //当前生效额每页条数
            id:'',         //del时必须
            building:'',   //楼宇名称
            unit_number:'' //单元名称
        }
        ElMessage.success('添加单元成功！')
        formModel.value.building=''
        formModel.value.unit_number=''
        getArticleList()

    } else {
        // 编辑逻辑
        // 提交 formModel.value 数据
    }

  dialogVisible.value = false; // 关闭对话框
}


// 根据后端代码渲染单元管理数据
const getArticleList = async () =>{
    loading.value = true //开启loading效果
    const res=await getDanYuan(params.value)
    console.log(res.data);
    articleList.value=res.data.data
    total.value=Number(res.data.total)
    loading.value = false //开启loading效果
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.pagenum=1
    params.value.pagesize=size
    // 重新渲染
    getArticleList()
}

// 分页
const handleCurrentChange=(page)=>{
    console.log('页码变化了',page);
    params.value.pagenum=page
   // 重新渲染
   getArticleList()
}

// 搜索逻辑=>按照最新的搜索条件 ，重新检索 ，从第一页开始展示
// 点击添加单元
const onAddAritcle=()=>{
    // 管理弹出框是否是添加和编辑的 false就是添加
    isDialog.value=false
    dialogVisible.value=true //打开弹出框

}

// 编辑楼宇 这里要根据后台是不是有数据如果有数据就是修改
const onEditArticle=(row)=>{
    console.log('140行',row);
    values.value=row.name
    // 管理弹出框是否是添加和编辑的
    isDialog.value=true
    dialogVisible.value=true
    formModel.value = { ...row }; // 设置表单数据为当前行数据的副本
}

// 删除单元的数据
const onDeleteArticle= async (row)=>{
    ElMessageBox.confirm('您是否要删除该单元?','提示！',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async() => {
        const res = await delDanYuan({action:'del',id:row.id})
        ElMessage.success(res.data.message)
        getArticleList()
    })
}


// 监听子组件 (添加或者编辑成功的回调)
const onsuccess=(type)=>{
    if(type==='add'){
        // 渲染最后一页 总条数 ÷ 每页页码条数 的和 再向上取整
        const lastPage=Math.ceil((total.value+1) / params.value.pagesize)
        params.value.pagenum=lastPage //更新成当前页码
    }
    getArticleList()
    
}
</script>

<template>

      <page-container title="">

        <template #extra>
            <el-button type="primary" @click="onAddAritcle">添加单元</el-button>
        </template>

        
        <!-- 表格区域 articleList = 数据源  -->
        <el-table :data="articleList" v-loading="loading">
            <el-table-column type="index" width="200" label="编号" />

            <el-table-column label="楼宇名称" prop="pub_date" >
                <template #default="{row}">
                    {{ row.building }}
                </template>
            </el-table-column>

            <el-table-column label="单元名称" prop="pub_date" >
                <template #default="{row}">
                    {{ row.unit_number }}
                </template>
            </el-table-column>
            
            <el-table-column label="操作"  width="190">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.page"  
            v-model:page-size="params.perPage"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />
    </page-container>

    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" :title="!isDialog ? '添加单元':'编辑单元'" width="30%">
        <el-form :model="formModel" :rules="rules" ref="formRef">

            <el-form-item label="楼宇名称" prop="building">
                <!-- 需要后端返回的数据进行渲染 -->
                <el-select v-model="formModel.building"  placeholder="单元名称" size="large" style="width: 240px">
                    <el-option v-for="item in useStores.LouYu" :key="item.id"  :label="item.building_number" :value="item.building_number" />
                </el-select>
            </el-form-item>

            <el-form-item label="单元名称" prop="unit_number">
                <!-- 需要后端返回的数据进行渲染 -->
                <!-- <el-select v-model="formModel.name"  placeholder="单元名称" size="large" style="width: 240px">
                    <el-option v-for="item in danyuanList" :key="item.id"  :label="item.name" :value="item.id" />
                </el-select> -->
                 <el-input v-model="formModel.unit_number" placeholder="请输入单元名称"></el-input>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">
                确认
                </el-button>
            </span>
        </template>
    </el-dialog>


</template>

<style lang="scss" scoped>

</style>